<template>
	<div class="park-wrap">
		<header class="header-body header-park">
		    <a class="back" href="javascript:;" @click="goback"></a>
		    <div class="title">
		        <span class="tit">园区详情</span>
		    </div>
		</header>
		<section class="house-base-info">
		 <h1 class="title1">{{ parkGet.title }}</h1>
		 <h1 class="title2">园区编号：{{ parkGet.code }}</h1>
		</section>
		<section class="banner-body" id="banner-body">
			<swiper :options="swiperOption" ref="mySwiper">
				<swiper-slide v-if="parkGet.slider.video">
					<video controls>
						<source :src="parkGet.slider.video">
					</video>
				</swiper-slide>
				<swiper-slide v-for="(slider,key) in parkGet.slider.image" :key="key">
					<img :src="slider">
				</swiper-slide>
				<div class="swiper-pagination"  slot="pagination" style="width:63px;height:26px;line-height: 26px;right:10px;bottom:10px;left:initial;background-color:#000;color:#fff;"></div>
			</swiper>
		</section>
		<section class="house-base-info">
		    <div class="other-house-info">
		        <div class="items">
		          <span class="lab">建筑面积：</span>{{ parkGet.area }}㎡</div>
		        <div class="items">
		          <span class="lab" v-if='parkGet.park_type'>园区类型：</span>{{ parkGet.park_type.name }}</div>
		        <div class="items"  v-if='parkGet.park_format'>
		            <span class="lab">园区业务：</span>{{ parkGet.park_format.name }}</div>
		        <div class="items"><span class="lab">园区区域：</span>
		            <span class="txt ellips">{{ parkGet.city }}{{ parkGet.city_first }}{{ parkGet.city_second }}</span>
		        </div>
		    </div>
		</section>
		<section class="house-price-trend" style="margin-top: 12px;">
		    <div class="title">园区概况</div>
		    <div class="content" :class="{desClose:close,desOpen:!close}" style="padding:0 15px;" >
		    <div v-html="parkGet.des"></div>
		    </div>
		     <div class="open" @click="openBtn">{{ opentxt }}<span class="desIocn" :class="{openIcon:open,closeIcon:!open}"></span></div>
		</section>
		<section class="map-periphery" style="display:none;">
		    <div class="title" style="padding: 20px 15px" >
		        <span class="txt">周边配套</span>
		    </div>
		    <a class="map-box">
		    	<baidu :longitude = "parkGet.longitude" :latitude="parkGet.latitude" ></baidu>
		    </a>
		</section>
		<section class="park-house" style="margin-top:12px;">
			<div v-if='parkGet.workshop.length !=0' class="title" style="padding:20px 15px 10px;border-bottom:1px solid #f0f0f0;background-color:#fff;">
				<span class="txt">园区厂房</span>
				<span class="house-num"  v-if='parkGet.workshop'>共{{ parkGet.workshop.length }}套</span>
			</div>
			<div class="house-list" v-if='parkGet.workshop'>
		        <router-link :to="{name:'detail',params:{id:house.id}}" class="items" :key="key" v-for="(house,key) in parkGet.workshop">
		            <div class="pic-box">
		                <img :src="house.logo"
		                     alt=""/>
		            </div>
		            <div class="info-box">
		                <p class="tit ellips">{{ house.title }}</p>
		                 <p class="info ellips">
		                	<span v-if="house.property_type">{{ house.property_type.name }}/</span>
		                	<span v-if="house.area">{{ house.area }}/㎡/</span>
		                	<span>{{ parkGet.title }}/</span>
		                	<span>{{ parkGet.city }}{{ parkGet.city_first }}{{ parkGet.city_second }}</span></p>
		                <p class="area ellips" v-if="house.type == 0 ">
			                <span v-if="house.rent == 0">
			                	<em class="price">面议</em>
			                </span>
			                <span v-if="house.rent !=0">
			                	<em class="price">{{ house.rent }}</em>
		                    	<small class="unit">元/㎡/月</small>
			                </span>
		                </p>
		                <p class="area ellips" v-if="house.type == 1 ">
		                	<span v-if="house.price == 0">
			                	<em class="price">面议</em>
			                </span>
			                <span v-if="house.price !=0">
			                	<em class="price">{{ house.price }}</em>
		                    	<small class="unit">元/㎡</small>
			                </span>
		                </p>
		                <div class="tag-box" v-if="house.tag[0] != ''">
		                    <span class="tag" v-if="index < 3" v-for="(tag,index) in house.tag">{{ tag }}</span>
		                </div>
		            </div>
		        </router-link>
		    </div>
		</section>
        <message :name='name' :mobile="mobile" :model="model" :modelId="modelId" :url="url" :isUse="isUse"  :isSet="isSet" :isUrl="isUrl"></message>
		<footer-view></footer-view>
	</div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import baidu from './baidu'
  import message from '../components/public/message'

	export default{
		name:'detail',
	    data(){
			return{
				swiperOption: {
		          height: 380,
		          speed: 500,//切换速度
		          watchOverflow: true, //当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航等。默认不开启这个功能。
		          loop: false,//开启循环模式
		          slidesPerView: 1,
		          spaceBetween: 30,
		          ationType:'progress',
		          preventClicksPropagation: true,//阻止click冒泡。拖动Swiper时阻止click事件。
		          simulateTouch: false,//鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
		          pagination: {
				    el: '.swiper-pagination',
				    type: 'fraction',
				  },
		          on: {
		            touchEnd: function (event) {
		              //你的事件
		            },
		          }
		        },
		        parkGet:{},
		        opentxt:'展开信息',
		        close:true,
		        open:true,
		        is_subscribe:1,
		        name:'经纪人',
                mobile:'123',
               	model:'park_rent',
                modelId:'',
                isUse:false,
                isSet:'',
                isUrl:'',
                url:this.$route.path.slice(this.$route.path.indexOf('/'))
			}
		},
		 components: {
		    swiper,
		    swiperSlide,
		    baidu,
		    message
		},
		mounted:function(){
		    this.parkDetail()
		},
		methods:{
			parkDetail(){
				this.$get('/api/park/'+this.$route.params.id,{token:localStorage.getItem('token')}).then(res=>{
					if(res.code == 0){
						console.log(res.data)
						this.parkGet = res.data
						this.modelId = this.parkGet.id
						this.isSet = this.parkGet.im_set.is_use;
                        this.isUrl = this.parkGet.im_set.url;
					}
				})
			},
			goback(){
				this.$router.go(-1)
			},
			openBtn(){
				this.close = !this.close,
				this.open = !this.open
				this.opentxt = this.open?'展示信息':'收起信息'
			}
		}
	}
</script>

<style scoped>
 	@import '../assets/css/sale-details.css';
 	.park-wrap{
 		padding-bottom: 64px;
 		background-color: #f0f0f0;
 	}
 	.header-body.header-park{
 		position: relative;
 	}
 	.map-box{
 		display: block;
 		width: 100%;
 		height: 400px;
 	}
 	.house-base-info .title1{
	    padding: 20px 15px 0;
	    font-size: 18px;
	    font-weight: 700;
	    color: #333;
	    line-height: 1.2;
	}
	.house-base-info .title2{
	    padding: 10px 15px;
	    font-size: 14px;
	    font-weight: 500;
	    color: #333;
	    line-height: 1.2;
	}
	.park-house .txt{
		font-size: 16px;
		font-weight: 700;
		color: #333;
	}
    .house-list .items{
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    margin-left: 15px;
	    padding: 20px 0;
	    border-bottom: 1px solid #f0f0f0;
	}
	.house-list .items .pic-box{
	    position: relative;
	    width: 120px;
	    height: 120px;
	    margin-right: 15px;
	    overflow: hidden;
	}
img{
    width: 100%;
    border: none;
}
.house-list .items .info-box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100px;
    padding-right: 15px;
    overflow: hidden;
}
.house-list .items .tit{
    margin-bottom: 6px;
    font-size: 16px;
    color: #333;
    line-height: 1.2;
}
.ellips{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.house-list .items .info{
    margin-bottom: 5px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}
.house-list .items .area{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 8px;
    font-size: 12px;
    color: #aaa;
    line-height: 1.2;
}
.house-list .items .price{
    font-size: 1.3em;
    font-weight: 700;
    color: #e62129;
}
.house-list .items .unit{
    margin-right: 5px;
    font-size: .8em;
    color: #e62129;
}
.house-list .items .tag-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.house-list .items .tag:first-child {
    color: #e6b322;
    background-color: rgba(230, 179, 34, 0.3);
}
.house-list .items .tag:nth-child(2) {
    color: #68be8d;
    background-color: rgba(104, 190, 141, 0.2);
}
.house-list .items .tag:nth-child(3) {
    color: #59b9c7;
    background-color:  rgba(89, 185, 199, 0.2);
}
.open{
    	height: 50px;
    	line-height: 50px;
    	text-align: center;
    	font-size: 14px;
    	color: #333;
    	margin-top: 10px;
    	background-color: #fff;
    	border: 1px solid #ccc;
    }
    .open span{
    	display: inline-block;
    	margin-left: 6px;
    }
    .open span.openIcon{
    	border-top: 8px solid #999;
    	border-bottom: 0px solid transparent;
    	border-left: 6px solid transparent;
    	border-right: 6px solid transparent;  
    }
    .open span.closeIcon{
    	border-top: 0px solid #999;
    	border-bottom: 8px solid #999;
    	border-left: 6px solid transparent;
    	border-right: 6px solid transparent;  
    }
    .desClose{
    	height: 100px;
    	overflow: hidden;
    }
    .desOpen{
    	height: auto;
    }
</style>